<%@ page language="java" pageEncoding="utf-8" %>
<%@ include file="/WEB-INF/inc/taglibs.jsp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>网站信息</title>
    <link rel="stylesheet" href="${path }/admin/css/pintuer.css"/>
    <link rel="stylesheet" href="${path }/admin/css/admin.css"/>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/js/imgFileupload.css"/>
    <script src="${path }/public/js/jquery-1.8.2.min.js"></script>
    <script src="${path }/admin/js/pintuer.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/public/js/ajaxfileupload.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/imgFileupload.js"></script>

    <link rel="stylesheet" href="${path }/admin/css/inputPage.css"/>
    <script src="${path}/public/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
    <script type="text/javascript" src="${path}/public/layer/layer.js"></script>


    <script type="text/javascript">


        function ajaxActivityFileUpload(id) {
            var rootPaht = '<%=request.getContextPath()%>';
            var fileRootPaht = rootPaht.replace("\/bbs", "");

            $.ajaxFileUpload({
                url: '<%=request.getContextPath()%>/upload/uploadimg.do',
                secureuri: false,
                fileElementId: id,
                dataType: 'json',
                success: function (data, status) {
                    var isok = data.isok;
                    if (isok == 1) {
                        var fileHtml = "";
                        fileHtml += "<tr><td>";
                        fileHtml += "<div>";
                        fileHtml += "<div style='float: left;width: 504px'>";
                        fileHtml += "<input type='hidden'  name='actImg' value='/upload/" + data.path + "'/>";
                        fileHtml += "<img  src='" + fileRootPaht + "/upload/" + data.path + "' width='100%' height='100%'>";
                        fileHtml += "</div>";
                        fileHtml += "<div style='float: left; margin-left: 20px;margin-top: 6px'>";
                        fileHtml += "<button class='button border-main icon-check-square-o' type='button' onclick='deleteFile(this);'>删除</button>";
                        fileHtml += "</div>";
                        fileHtml += "</div>";
                        fileHtml += "</td></div>";
                        $("#imgTest").attr("src", rootPaht + "/upload/" + data.path);
                        $("#activityFileTable").append(fileHtml);
                    }
                },
                error: function (data, status, e) {
                    alert('上传出错');
                }
            });
            return false;
        }


        function ajaxAdFileUpload(id) {
            var rootPaht = '<%=request.getContextPath()%>';
            var fileRootPaht = rootPaht.replace("\/bbs", "");
            $.ajaxFileUpload({
                url: '<%=request.getContextPath()%>/upload/uploadimg.do',
                secureuri: false,
                fileElementId: id,
                dataType: 'json',
                success: function (data, status) {
                    var isok = data.isok;
                    if (isok == 1) {
                        var fileHtml = "";
                        fileHtml += "<tr><td>";
                        fileHtml += "<div>";
                        fileHtml += "<div style='float: left;width: 504px'>";
                        fileHtml += "<input type='hidden'  name='adImg' value='/upload/" + data.path + "'/>";
                        fileHtml += "<img  src='" + fileRootPaht + "/upload/" + data.path + "' width='100%' height='100%'>";
                        fileHtml += "</div>";
                        fileHtml += "<div style='float: left; margin-left: 20px;margin-top: 6px'>";
                        fileHtml += "<button class='button border-main icon-check-square-o' type='button' onclick='deleteFile(this);'>删除</button>";
                        fileHtml += "</div>";
                        fileHtml += "</div>";
                        fileHtml += "</td></div>";
                        $("#adFileTable").append(fileHtml);
                    }
                },
                error: function (data, status, e) {
                    alert('上传出错');
                }
            });
            return false;
        }


        $(function () {
            var dataimg = $("#img1").attr("data-image")
            if (dataimg != "") {
                $("#img1").attr("data-image", "<%=request.getContextPath()%>/upload/" + dataimg);
            }
        });


        function addPrize() {
            var prizeName = $("#prizeName").val();
            var prizeCount = $("#prizeCount").val();
            var prizeContent = $("#prizeContent").val();
            if ($.trim(prizeName) == "") {
                alert("奖项名称不能为空！");
                return;
            }
            if ($.trim(prizeCount) == "") {
                alert("奖项数量不能为空！");
                return;
            }
            if ($.trim(prizeContent) == "") {
                alert("奖项内容不能为空！");
                return;
            }
            var prizeHtml = "<tr>";
            prizeHtml += "<td>" + prizeName + "";
            prizeHtml += "<input type='hidden' name='prizeName' value='" + prizeName + "'/></td>";
            prizeHtml += "<td>" + prizeCount + "名";
            prizeHtml += "<input type='hidden' name='prizeCount' value='" + prizeCount + "'/></td>";
            prizeHtml += "<td>" + prizeContent + "";
            prizeHtml += "<input type='hidden' name='prizeContent' value='" + prizeContent + "'/></td>";
            prizeHtml += "<td><input name='' id='' style='width: 49px' /></td>";
            prizeHtml += "<td style='color: #00AAEE; cursor:pointer;' onclick='deleteItem(this)'>删除</td>";

            prizeHtml += "</tr>";

            $("#prizeTable").append(prizeHtml);

            $("#prizeName").val("");
            $("#prizeCount").val("");
            $("#prizeContent").val("");
        }

        function addArrange() {
            var arrangeName = $("#arrangeName").val();
            var arrangeStartTime = $("#arrangeStartTime").val();
            var arrangeEndTime = $("#arrangeEndTime").val();
            if ($.trim(arrangeName) == "") {
                alert("流程名称不能为空！");
                return;
            }
            if ($.trim(arrangeStartTime) == "") {
                alert("流程开始时间不能为空！");
                return;
            }
            if ($.trim(arrangeEndTime) == "") {
                alert("流程结束时间不能为空！");
                return;
            }

            var arrangeHtml = "<tr>";
            arrangeHtml += "<td>" + arrangeName + "";
            arrangeHtml += "<input type='hidden' name='arrangeName' value='" + arrangeName + "'/></td>";
            arrangeHtml += "<td>" + arrangeStartTime + "-" + arrangeEndTime + "";
            arrangeHtml += "<input type='hidden' name='arrangeStartTime' value='" + arrangeStartTime + "'/>";
            arrangeHtml += "<input type='hidden' name='arrangeEndTime' value='" + arrangeEndTime + "'/></td>";
            arrangeHtml += "<td><input name='' id='' style='width: 49px' /></td>";
            arrangeHtml += "<td style='color: #00AAEE; cursor:pointer;' onclick='deleteItem(this)'>删除</td>";
            arrangeHtml += "</tr>";
            $("#arrangeTable").append(arrangeHtml);

            $("#arrangeName").val("");
            $("#arrangeStartTime").val("");
            $("#arrangeEndTime").val("");
        }


        function deleteItem(obj) {
            $(obj).parent().remove();
        }

        function deleteFile(obj) {
            $(obj).parent().parent().parent().parent().remove();
        }
    </script>
    <script type="text/javascript">
        function submitForm() {
            var name = $("#name").val();
            var enStartTimeStr = $("#enStartTimeStr").val();
            var enEndTimeStr = $("#enEndTimeStr").val();
            var startTimeStr = $("#startTimeStr").val();
            var endTimeStr = $("#endTimeStr").val();
            if ($.trim(name) == "") {
                alert("名称不能为空");
                return;
            }
            if ($.trim(enStartTimeStr) == "" || $.trim(enEndTimeStr) == "") {
                alert("报名时间不能为空！");
                return;
            }
            if ($.trim(startTimeStr) == "" || $.trim(endTimeStr) == "") {
                alert("活动时间不能为空！");
                return;
            }

            // 判断是否三个流程
            if ($("#arrangeTable tr").length != 4) {
                alert("流程数量必须为3个");
                return;
            }

            $("#form").submit();
        }

    </script>
</head>
<body>
<div class="panel admin-panel">
    <div class="panel-head"><strong><span class="icon-pencil-square-o"></span> 活动添加</strong></div>
    <div class="body-content">
        <form method="post" class="form-x" action="${path}/admin/activity/updateoradd.do" id="form"
              enctype="multipart/form-data">

            <div class="form-group">
                <div class="label">
                    <label>活动名称：</label>
                </div>
                <div class="field">
                    <input type="hidden" name="id" value="${activity.id}"/>
                    <input type="text" class="input" name="name" value="${activity.name}" size="100" id="name"
                           style="width: 504px"/>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>报名时间：</label>
                </div>
                <div class="field">
                    <ul class="search" style="margin-left: -20px">
                        <li>
                            <input type="text" name="enStartTimeStr" id="enStartTimeStr" class="txtSearch"
                                   value="${activity.enStartTimeStr}"
                                   onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd'})"
                                   style="width: 240px;height: 40px;border-radius: 3px;" placeholder="开始时间">&nbsp;
                            至
                            <input type="text" name="enEndTimeStr" id="enEndTimeStr" class="txtSearch"
                                   value="${activity.enEndTimeStr}"
                                   onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd'})"
                                   style="width: 240px;height: 40px;border-radius: 3px;" placeholder="结束时间">&nbsp;
                        </li>
                    </ul>

                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>活动时间：</label>
                </div>
                <div class="field">
                    <ul class="search" style="margin-left: -20px">
                        <li>
                            <input type="text" name="startTimeStr" id="startTimeStr" class="txtSearch"
                                   value="${activity.startTimeStr}"
                                   onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd'})"
                                   style="width: 240px;height: 40px;border-radius: 3px;" placeholder="开始时间">&nbsp;
                            至
                            <input type="text" name="endTimeStr" id="endTimeStr" class="txtSearch"
                                   value="${activity.endTimeStr}"
                                   onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd'})"
                                   style="width: 240px;height: 40px;border-radius: 3px;" placeholder="结束时间">&nbsp;
                        </li>
                    </ul>
                </div>
            </div>

            <div class="form-group">
                <div class="label">
                    <label>人数上限：</label>
                </div>
                <div class="field">
                    <input type="text" class="input" name="maxCount" id="maxCount" value="${activity.maxCount}"
                           size="100" style="width: 504px"/>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>父级板块：</label>
                </div>

                <div class="field">
                    <select class="input" name="type" id="type" style="width: 504px">
                        <option value="1">大侠赛事</option>
                        <option value="2">企业活动</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <div class="label">
                    <label>触发方式：</label>
                </div>

                <div class="field">
                    <select class="input" name="triggerType" id="triggerType" style="width: 504px"
                            onchange="handover(this);">
                        <option value="系统检测记录">系统检测记录</option>
                        <option value="用户上传文件">用户上传文件</option>
                        <%--<option value="用户操作触发">用户操作触发</option>--%>
                    </select>
                </div>
            </div>

            <div class="form-group" id="walkDiv">
                <div class="label">
                    <label>健走规则：</label>
                </div>

                <div class="field">
                    <select class="input" name="walkType" id="walkType" style="width: 55px;float: left">
                        <option value="2">每天</option>
                        <option value="1">总共</option>
                    </select> <input type="text" name="walkCount" style=" height: 42px; width: 55px;"> 步
                </div>
            </div>

            <div class="form-group" id="ruleTypeDiv" style="display:none">
                <div class="label">
                    <label>活动规则：</label>
                </div>

                <div class="field">
                    <select disabled class="input" name="ruleType" id="ruleType" style="width: 504px">
                        <option value="投票">投票</option>
                        <option value="点赞">点赞</option>
                        <%--<option value="抽奖">抽奖</option>--%>
                        <%--<option value="竞赛">竞赛</option>--%>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <div class="label">
                    <label>奖项设置：</label>
                </div>
                <div class="field">
                </div>
            </div>

            <div class="form-group">
                <div class="label">
                    <label style=" color: #666666;">奖项名称：</label>
                </div>
                <div class="field">
                    <input type="text" class="input" value="" size="100" id="prizeName" style="width: 504px"/>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label style=" color: #666666;">奖项名额：</label>
                </div>
                <div class="field">

                    <div>
                        <div style="float: left;">
                            <input type="text" class="input" value="" size="100" id="prizeCount" style="width: 504px"/>
                        </div>
                        <div style="float: left; margin-left: 20px;margin-top: 14px">
                        </div>
                    </div>

                </div>
            </div>

            <div class="form-group">
                <div class="label">
                    <label style=" color: #666666;">奖项内容：</label>
                </div>
                <div class="field">
                    <div>
                        <div style="float: left;">
                            <input type="text" class="input" value="" size="100" id="prizeContent"
                                   style="width: 504px"/>
                        </div>
                        <div style="float: left; margin-left: 20px;margin-top: 4px">
                            <button class="button border-main icon-check-square-o" type="button" onclick="addPrize();">
                                添加奖项
                            </button>
                        </div>
                    </div>
                </div>
            </div>


            <div class="form-group">
                <div class="label">
                    <label>&nbsp;</label>
                </div>
                <div class="field" style="">
                    <table style="width: 700px" id="prizeTable">
                        <tr style="color: #000000;font-size: 14px;line-height: 45px">
                            <td style="width: 14%;color: #000000;font-size: 14px">奖品名称</td>
                            <td style="width: 14%;color: #000000;font-size: 14px">奖项名额</td>
                            <td style="width: 45%;color: #000000;font-size: 14px">奖品内容</td>
                            <td style="width: 10%;color: #000000;font-size: 14px">显示排序</td>
                            <td style="width: 15%;color: #000000;font-size: 14px">操作</td>
                        </tr>

                        <c:forEach items="${activity.prizeList}" var="prize" varStatus="p">
                            <tr>
                                <td>${prize.name}<input name="prizeName" value="${prize.name}" type="hidden"></td>
                                <td>${prize.count}<input name="prizeCount" value="${prize.count}" type="hidden"></td>
                                <td>${prize.prize}<input name="prizeContent" value="${prize.prize}" type="hidden"></td>
                                <td><input name="" id="" style="width: 49px"></td>
                                <td style="color: #00AAEE; cursor:pointer;" onclick="deleteItem(this)">删除</td>
                            </tr>
                        </c:forEach>

                    </table>
                </div>
            </div>


            <div class="form-group">
                <div class="label">
                    <label>流程设置：</label>
                </div>
                <div class="field">
                </div>
            </div>

            <div class="form-group">
                <div class="label">
                    <label style=" color: #666666;">流程名称：</label>
                </div>
                <div class="field">
                    <input type="text" class="input" value="" size="100" id="arrangeName" style="width: 504px"/>
                </div>
            </div>

            <div class="form-group">
                <div class="label">
                    <label style=" color: #666666;">流程开始时间：</label>
                </div>
                <div class="field">
                    <input type="text" id="arrangeStartTime" class="txtSearch" value=""
                           onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss'})"
                           style="width: 504px;height: 40px;border-radius: 3px;" placeholder="开始时间"/>&nbsp;
                </div>
            </div>

            <div class="form-group">
                <div class="label">
                    <label style=" color: #666666;">流程结束时间：</label>
                </div>
                <div class="field">
                    <div>
                        <div style="float: left;">
                            <input type="text" id="arrangeEndTime" class="txtSearch" value=""
                                   onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss'})"
                                   style="width: 504px;height: 40px;border-radius: 3px;" placeholder="结束时间"/>&nbsp;
                        </div>
                        <div style="float: left; margin-left: 20px;margin-top: 4px">
                            <button class="button border-main icon-check-square-o" type="button"
                                    onclick="addArrange();">添加流程
                            </button>
                        </div>
                    </div>
                </div>
            </div>


            <div class="form-group">
                <div class="label">
                    <label>&nbsp;</label>
                </div>
                <div class="field" style="">
                    <table style="width: 700px" id="arrangeTable">
                        <tr style="color: #000000;font-size: 14px;line-height: 45px">
                            <td style="width: 14%;color: #000000;font-size: 14px">流程名称</td>
                            <td style="width: 54%;color: #000000;font-size: 14px">流程时间</td>
                            <td style="width: 10%;color: #000000;font-size: 14px">显示排序</td>
                            <td style="width: 15%;color: #000000;font-size: 14px">操作</td>
                        </tr>
                        <c:forEach items="${activity.arrangeList}" var="arrange" varStatus="a">

                            <tr>
                                <td>
                                        ${arrange.name}
                                    <input name="arrangeName" value="${arrange.name}" type="hidden">
                                </td>
                                <td>
                                        ${arrange.startTimeStr}~${arrange.endTimeStr}
                                    <input name="arrangeStartTime" value="${arrange.startTimeStr}" type="hidden">
                                    <input name="arrangeEndTime" value="${arrange.endTimeStr}" type="hidden">
                                </td>
                                <td>
                                    <input name="sort" id="sort" style="width: 49px"></td>
                                <td style="color: #00AAEE; cursor:pointer;" onclick="deleteItem(this)">删除</td>
                            </tr>

                        </c:forEach>

                    </table>
                </div>
            </div>


            <div class="form-group">
                <div class="label">
                    <label>活动图片：</label>
                </div>
                <%--<div class="field">--%>
                <%--<input type="file" class="button bg-blue margin-left" id="actFile" name="actFile"--%>
                <%--onchange="ajaxActivityFileUpload('actFile')"/>--%>
                <%--</div>--%>
                <div class="actFile" style="width: 500px;margin-left: 100px">
                </div>
            </div>

            <div class="form-group">
                <div class="label">
                    <label></label>
                </div>
                <div class="field">
                    <table style="width: 700px" id="activityFileTable">

                        <c:forEach items="${activity.actFileList}" var="actFile" varStatus="af">
                            <tr>
                                <td>
                                    <div>
                                        <div style="float: left;width: 504px">
                                            <input name="actImg" value="${actFile.filePath}" type="hidden">
                                            <img src="${actFile.filePath}" width="100%" height="100%">
                                        </div>
                                        <div style="float: left; margin-left: 20px;margin-top: 6px">
                                            <button class="button border-main icon-check-square-o" type="button"
                                                    onclick="deleteFile(this);">删除
                                            </button>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </c:forEach>

                    </table>
                </div>
            </div>

            <div class="form-group">
                <div class="label">
                    <label>广告图片：</label>
                </div>
                <%--<div class="field">--%>
                <%--<input type="file" class="button bg-blue margin-left" id="adFile" name="adFile"--%>
                <%--onchange="ajaxAdFileUpload('adFile')"/>--%>
                <%--</div>--%>
                <div class="adFile" style="width: 500px;margin-left: 100px"></div>
            </div>

            <div class="form-group">
                <div class="label">
                    <label></label>
                </div>
                <div class="field">
                    <table style="width: 700px" id="adFileTable">

                        <c:forEach items="${activity.adFileList}" var="adFile" varStatus="ad">
                            <tr>
                                <td>
                                    <div>
                                        <div style="float: left;width: 504px">
                                            <input name="actImg" value="${adFile.filePath}" type="hidden">
                                            <img src="${adFile.filePath}" width="100%" height="100%">
                                        </div>
                                        <div style="float: left; margin-left: 20px;margin-top: 6px">
                                            <button class="button border-main icon-check-square-o" type="button"
                                                    onclick="deleteFile(this);">删除
                                            </button>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </c:forEach>
                    </table>
                </div>
            </div>

            <div class="form-group">
                <div class="label">
                    <label>活动描述：</label>
                </div>
                <div class="field">
         <textarea rows="5" cols="" name="describer" id="describer" style="width: 500px" class="input">
             ${activity.describer}
         </textarea>
                </div>
            </div>

            <div class="form-group">
                <div class="label">
                    <label></label>
                </div>
                <div class="field">
                    <button class="button border-main icon-check-square-o" type="button" onclick="submitForm();"> 提交
                    </button>
                    <button class="button border-red icon-tags" type="button" onclick="window.history.go(-1);"> 返回
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
    var type = "${activity.type}";
    var ruleType = "${activity.ruleType}";
    var triggerType = "${activity.triggerType}";


    $(function () {
        $("#type").val(type);
        $("#ruleType").val(ruleType);
        $("#triggerType").val(triggerType);

        var actFile = new ImgUploadeFiles('.actFile', function (e) {
            this.init({
//                MAX : 1, //限制个数
                MH: 5800, //像素限制高度
                MW: 5900, //像素限制宽度
                callback: function (arr) {
//                    console.log(arr)
                    var new_obj = $("<input type='file' name='actFile' class='imgFiles' style='display: none' accept='' multiple></input>");
                    new_obj[0].files = arr;
                    $(".actFile").after(new_obj);
                }
            });
        }, "actFile");


        var adFile = new ImgUploadeFiles('.adFile', function (e) {
            this.init({
//                MAX : 1, //限制个数
                MH: 5800, //像素限制高度
                MW: 5900, //像素限制宽度
                callback: function (arr) {
//                    console.log(arr)
                    var new_obj = $("<input type='file' name='adFile' class='adFile' style='display: none' accept='' multiple></input>");
                    new_obj[0].files = arr;
                    $(".actFile").after(new_obj);
                }
            });
        }, "adFile");


        $("[name='adFile']").val(adFile.files);
    });

    $(window).scroll(function (event) {
    });

    function handover(self) {

        var _this = $(self);

        if (_this.val() == "用户上传文件") {
            $("#ruleTypeDiv").show();
            $("#ruleTypeDiv").find(":input").attr("disabled", false);
            $("#walkDiv").hide();
            $("#walkDiv").find(":input").attr("disabled", true);
        } else {
            $("#ruleTypeDiv").hide();
            $("#ruleTypeDiv").find(":input").attr("disabled", true);
            $("#walkDiv").show();
            $("#walkDiv").find(":input").attr("disabled", false);
        }

    }

</script>

</body>
</html>